<template>
  <div class="seckill">
    <template
      v-if="!seckillData || !seckillList"
    >
      <div class="loading">
        <svg
          t="1616053408617"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="17643"
          width="64"
          height="64"
        >
          <path
            d="M739.487 798.497v-78.751c0-86.667-49.501-164.599-124.671-202.725 75.171-38.137 124.671-116.076 124.671-202.735v-78.747c34.78-1.811 62.499-30.658 62.499-65.863 0-36.359-29.582-65.941-65.972-65.941H287.953c-36.358 0-65.941 29.581-65.941 65.941 0 35.217 27.738 64.072 62.505 65.866v78.743c0 86.661 49.495 164.592 124.666 202.735-75.171 38.127-124.666 116.059-124.666 202.726v78.748c-34.768 1.793-62.505 30.646-62.505 65.868 0 36.368 29.582 65.95 65.941 65.95h448.061c36.39 0 65.972-29.581 65.972-65.95 0-35.21-27.719-64.054-62.499-65.865zM256.513 169.678c0-17.337 14.117-31.44 31.44-31.44h448.061c17.353 0 31.472 14.102 31.472 31.44 0 17.332-14.119 31.45-31.472 31.45H287.953c-17.322-0.001-31.44-14.118-31.44-31.45z m62.504 550.068c0-86.86 58.626-163.385 142.559-186.056a17.26 17.26 0 0 0 12.734-16.661c0-7.785-5.22-14.626-12.734-16.646-83.933-22.709-142.559-99.227-142.559-186.094v-78.655H704.98v78.655c0 86.867-58.626 163.385-142.559 186.094-7.515 2.021-12.735 8.862-12.735 16.646a17.262 17.262 0 0 0 12.735 16.661c83.933 22.673 142.559 99.196 142.559 186.056v78.659H670c-8.233-28.4-34.42-49.172-65.478-49.172h-75.286V474.897c80.982-8.637 144.278-77.368 144.278-160.603v-17.381H350.466v17.381c0 83.232 63.29 151.961 144.262 160.602v274.337H419.45c-31.053 0-57.241 20.771-65.473 49.172h-34.964v-78.659z m416.998 176.066H287.954c-17.322 0-31.44-14.117-31.44-31.455 0-17.332 14.117-31.45 31.44-31.45h448.061c17.353 0 31.472 14.119 31.472 31.45 0 17.337-14.119 31.455-31.472 31.455z"
            p-id="17644"
            fill="#1296db"
          ></path>
        </svg>
        <span class="loading_text">加载中...</span>
      </div>
    </template>
    <template v-else>
    <div class="seckill_cover">
      <div class="img">
        <img src="../assets/a.jpg" alt="">
      </div>
    </div>
    <div class="seckill_active" v-if="seckillData">
      <div class="active_icon">
        <svg
          t="1615539245281"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4209"
          width="45"
          height="45"
        >
          <path
            d="M227.328 180.224c31.744 1.024 64 3.072 95.744 3.584 46.592 0.512 91.648-8.192 135.168-24.064 39.936-14.336 79.36-30.72 118.784-46.592 9.216-3.584 16.384-2.56 22.528 5.12 47.104 59.904 111.104 87.04 184.832 94.208 4.608 0.512 8.704 1.024 12.8 1.536 8.704 2.048 13.312 7.68 12.288 16.896-8.704 94.208 26.624 173.056 84.48 243.712 15.872 19.456 34.304 36.352 51.712 54.272 8.192 8.192 8.704 12.8 0 19.968-50.688 44.032-73.728 102.4-85.504 165.888-7.168 37.376-9.728 74.752-7.168 113.152 0.512 9.728-4.096 15.872-12.8 19.968-20.48 10.24-40.96 20.48-61.44 31.232-44.032 24.064-83.968 53.76-121.344 87.04-6.656 5.632-13.824 10.752-20.48 16.384-9.728 7.68-19.968 8.192-31.232 2.56-19.968-10.24-38.912-21.504-59.392-30.208-51.712-22.528-104.96-35.328-161.792-23.552-21.504 4.096-41.472 12.288-59.392 24.576-20.992 14.336-29.184 11.776-41.472-10.752-14.336-26.112-26.624-53.76-43.52-78.848-36.352-53.76-82.432-97.28-139.264-128.512-7.168-4.096-14.336-8.704-21.504-13.824-5.12-3.584-7.68-9.216-4.608-14.848 13.312-21.504 13.312-46.592 16.384-70.144 4.608-39.936 2.56-80.384-5.632-119.808-5.12-23.04-12.288-46.08-20.48-68.608-5.632-15.872-6.144-18.432 6.144-30.208 44.032-41.472 83.968-86.528 108.544-142.336 11.776-26.624 18.944-54.784 27.136-82.432 6.144-12.8 10.24-18.432 20.48-15.36z"
            fill="#F92636"
            p-id="4210"
          ></path>
          <path
            d="M923.136 724.48c4.096-60.928 21.504-116.224 53.76-167.424 3.072-4.608 7.168-8.704 10.752-13.312 5.632-7.68 5.12-15.36-2.048-21.504-37.376-31.232-61.44-71.168-80.896-114.688-20.992-47.104-38.912-95.232-44.032-146.944-1.536-15.872-1.024-32.256 0-48.128 0.512-13.824-3.072-18.944-16.896-18.432-50.176 2.56-91.648-17.92-128.512-50.688-2.56-2.56-3.072-7.168-4.608-11.264 4.096 0 9.216-1.536 12.8 0.512 10.752 5.632 20.48 12.8 31.232 18.944 30.208 16.896 61.44 27.648 96.768 20.48 17.92-3.584 28.672 6.656 26.112 24.576-6.144 43.008 3.072 83.968 15.36 124.416 12.8 40.96 29.184 80.384 51.2 117.76 14.848 25.088 32.768 47.104 54.272 66.048 1.536 1.536 3.072 2.56 4.608 4.096 14.848 13.824 15.36 19.456 3.584 36.352-31.232 45.568-50.176 95.744-58.368 149.504-3.072 17.92-0.512 36.864 0 55.296 0 7.68 4.096 17.92-7.168 19.968-10.752 1.536-12.8-8.192-14.336-16.384-2.048-9.728-2.56-19.968-3.584-29.184zM68.608 657.408c0 16.384 0.512 33.28 0 49.664 0 5.632-2.048 11.264-4.608 16.384-4.608 9.728-2.56 17.408 5.12 23.04 7.168 5.632 15.36 10.24 23.04 14.336 49.664 28.16 91.648 64.512 125.952 109.568 21.504 27.648 37.376 58.88 44.544 93.184 1.536 7.168 0 15.36-1.536 22.528-0.512 3.072-6.144 5.12-9.728 7.168-2.048-3.584-5.632-6.656-6.656-10.24-2.56-11.776-2.56-24.064-6.144-35.328-17.92-54.784-54.272-96.768-96.768-133.632-27.648-24.064-56.32-46.08-89.6-61.952-8.704-4.096-11.776-10.752-9.216-19.968 14.848-64.512 10.752-129.536 2.048-194.048-1.536-10.24-3.072-20.48-4.608-31.232-0.512-2.56 1.536-5.632 2.048-8.192 2.56 2.048 6.144 3.072 7.168 5.632 3.072 9.216 6.144 18.432 8.192 28.16 8.704 40.96 11.776 82.944 10.752 124.928zM309.248 139.264c-37.888-3.072-71.68-4.096-102.912-19.456-11.264-5.632-18.944 0.512-21.504 13.312-14.848 73.216-49.152 136.704-99.84 190.976-4.608 4.608-10.24 8.704-16.384 11.776-2.56 1.536-6.656-0.512-10.24-1.024 0.512-3.584 0.512-7.68 2.048-9.728 8.704-10.24 18.944-19.456 26.624-30.208C128 240.64 159.744 181.248 176.128 114.688c2.048-9.216 7.68-11.776 18.944-8.704 34.816 9.728 70.656 15.36 107.008 15.36 30.208 0 58.88-5.632 88.064-12.8 8.192-2.048 17.408-3.584 26.112-4.096 3.072 0 6.144 3.072 8.704 4.608-2.048 3.072-3.072 7.68-5.632 8.192-16.896 5.632-33.28 11.264-50.688 14.336-20.992 4.096-41.984 5.632-59.392 7.68zM752.64 984.064c4.608-3.584 8.192-8.192 13.312-11.264 38.4-24.576 77.312-49.152 116.224-74.24 7.68-5.12 14.848-10.24 22.528-15.872 8.704-6.656 15.36-4.096 19.456 5.632 3.072 7.68 7.168 15.36 10.752 22.528 8.192 15.36 3.584 23.04-12.8 27.648-42.496 11.776-84.992 24.576-126.976 37.376-10.24 3.072-19.968 6.656-29.696 9.728-3.584 1.024-7.168 1.024-10.752 1.536-1.024-0.512-1.536-1.536-2.048-3.072zM485.376 74.752c2.048-0.512 3.584-1.536 5.632-2.048 13.312-4.096 27.136-8.704 40.448-12.288 18.944-5.632 38.4-10.752 57.344-15.872 7.68-2.048 15.872-3.584 23.552-5.12 1.536-0.512 3.584 0 5.12 0.512 10.752 2.048 10.752 10.752 10.24 32.256-0.512 8.192-5.12 10.24-13.312 10.24-31.744-1.024-64-1.536-96.256-2.048-7.168 0-14.848 0-22.016-0.512-3.072 0-6.144-1.024-9.216-1.536-0.512-1.024-1.024-2.56-1.536-3.584z"
            fill="#F92636"
            p-id="4211"
          ></path>
          <path
            d="M200.704 306.176l17.408-5.632 11.264 33.792 32.768-10.752-11.264-33.792 16.896-5.632 28.16 86.016-16.896 5.632-12.288-37.376-32.768 10.752 12.288 37.376-17.408 5.632-28.16-86.016zM298.496 321.024c-9.216-28.16 1.024-49.664 24.064-56.832 23.04-7.68 44.032 3.584 53.248 31.744 9.216 28.16-1.024 50.176-23.552 57.856-23.04 7.168-44.544-4.608-53.76-32.768z m59.392-19.456c-6.144-18.432-17.92-27.136-30.72-22.528-12.8 4.096-17.408 17.92-11.264 36.352 6.144 18.432 17.92 27.648 30.72 23.04 13.312-4.096 17.408-18.432 11.264-36.864zM396.8 257.536l-24.064 8.192-4.608-14.336 66.048-21.504 4.608 14.336-24.576 8.192 23.552 71.68-17.408 5.632-23.552-72.192z"
            fill="#FFFAFB"
            p-id="4212"
          ></path>
          <path
            d="M287.232 443.392c0.512 24.064 0.512 53.248 0 75.776 23.552 15.36 33.28 32.768 38.4 48.128 5.632 16.896 6.144 29.184-0.512 37.888-3.072 4.608-7.68 7.68-13.312 10.752-4.608 2.56-11.264 4.608-17.408 6.144-2.56-7.68-9.216-18.432-16.384-24.576 4.608-1.024 8.704-2.048 11.776-3.584 2.56-1.024 5.12-2.048 6.656-4.608 2.56-3.584 2.048-9.728-0.512-16.896-4.608-12.8-13.824-28.16-35.84-41.984-0.512-17.408-1.536-40.448-3.072-59.392L230.4 479.232l70.656 205.312-28.672 8.704-79.36-231.936 65.024-20.48 4.096-2.56 25.088 5.12zM481.28 530.944c-8.704 12.8-19.456 27.136-29.184 38.4 16.384 11.264 35.84 18.944 56.32 20.992-5.12 8.192-10.752 23.552-12.288 33.792-48.128-8.704-83.968-41.984-114.176-89.088l-16.384 5.12 25.088 73.216 35.328-19.968c2.56 9.216 7.68 21.504 11.264 27.648-49.152 29.696-57.856 36.864-62.976 43.008-4.608-6.144-15.872-16.384-22.528-19.968 4.608-5.12 9.216-14.336 4.608-26.624L291.84 430.592l123.904-38.912 41.472 119.808-47.616 14.848c6.656 9.216 13.312 17.408 20.992 25.088 8.192-11.776 17.408-25.088 22.528-35.84l28.16 15.36zM333.312 446.976l7.168 20.48 60.416-18.944-7.168-20.48-60.416 18.944z m22.528 66.56l60.416-18.944-7.168-20.992-60.416 18.944 7.168 20.992zM621.568 532.48l-63.488 19.968 7.168 20.992-30.72 9.728-67.072-196.608 93.696-29.184 60.416 175.104zM507.392 404.48l15.872 45.568 32.768-10.24-15.872-45.568-32.768 10.24z m74.24 109.568l-16.384-47.104-32.768 10.24 16.384 47.104 32.768-10.24z m152.064-145.92l-28.16 8.704 42.496 123.904c6.656 18.944 5.12 28.16-5.632 36.864-10.24 8.704-29.184 15.36-56.832 24.064-4.096-8.192-14.336-20.48-22.528-27.648 19.456-5.12 39.936-11.776 45.568-13.312 6.144-2.048 7.68-4.608 5.632-9.728l-42.496-123.392-80.896 25.6-10.752-30.72 80.896-25.6-15.872-46.08 33.28-10.24 15.872 46.08 28.16-8.704 11.264 30.208z m-69.12 121.856c-13.312-12.8-39.936-32.768-59.392-47.616l22.016-22.016c19.456 13.824 46.592 32.256 60.416 44.544l-23.04 25.088z"
            fill="#FFFAFB"
            p-id="4213"
          ></path>
          <path
            d="M417.792 814.08l-23.04 15.36 17.408 52.736c4.608 13.312 4.096 20.48-2.56 27.648-6.144 6.656-16.896 11.264-33.28 16.384-3.584-6.656-10.24-16.384-16.384-22.528 9.216-2.56 18.432-5.632 21.504-6.656 3.072-1.024 4.096-2.56 3.072-5.632l-14.848-45.568-21.504 13.824-16.384-24.576c8.192-4.608 17.92-10.752 28.672-17.408l-12.8-38.912-28.16 9.216-8.192-25.6 28.16-9.216-13.824-43.008 27.136-8.704 13.824 43.008 23.04-7.68 8.192 25.6-23.04 7.68 10.752 32.256 19.968-12.8 12.288 24.576z m39.936-142.336c0 3.072-0.512 6.144-1.024 9.216 22.528 19.968 54.784 36.864 81.92 43.008-4.608 7.168-10.752 19.968-12.8 28.16-5.12-1.536-10.24-3.584-15.36-5.632 11.776 37.888 15.872 54.272 13.312 61.952-2.56 6.656-6.656 10.24-12.8 13.312-5.632 2.56-15.36 6.144-26.112 9.216-3.072-7.168-8.704-15.872-14.336-20.48 8.704-2.048 16.384-4.096 19.456-5.12 3.072-1.024 5.12-2.048 6.144-4.608 1.024-3.072-0.512-11.264-6.656-30.72l-37.376 12.288 22.528 68.096c3.072 9.728 5.632 10.752 17.92 6.656l34.816-11.264c10.752-3.584 10.752-8.704 4.096-34.304 7.68 2.56 19.968 3.072 28.16 2.56 7.68 34.816 3.072 47.616-22.016 55.808l-39.936 13.312c-28.16 9.216-39.424 4.608-48.64-23.552l-26.112-78.848c-2.56 4.096-5.12 7.68-7.168 11.264-4.608-5.632-16.896-15.872-23.552-20.48 20.992-26.624 35.328-63.488 38.4-99.328l27.136-0.512z m38.912 68.096c-15.36-8.192-31.232-18.944-45.056-31.232-4.096 18.432-10.24 36.352-18.432 52.224l63.488-20.992zM748.544 622.08c31.744 104.448 41.472 141.824 36.864 156.16-2.56 9.728-7.68 14.336-15.36 18.432-6.656 3.584-18.432 7.168-30.208 10.752-2.56-7.68-10.24-17.92-17.408-24.064 11.264-2.56 22.016-6.144 26.624-7.68 4.096-1.536 6.144-2.56 7.168-6.656 1.536-3.584 1.024-11.776-2.56-26.112l-16.896 13.312c-1.536-3.072-3.584-6.656-6.144-10.24-36.864 21.504-43.52 26.624-47.616 31.232-3.072-4.096-10.24-14.336-15.36-19.456 3.584-2.56 5.12-8.192 6.144-16.384 1.024-7.68 2.56-38.4-1.536-64.512l26.624-1.024c1.536 20.992 0 44.544-2.56 64.512l22.528-12.288c-4.608-7.68-9.728-14.848-14.848-21.504l16.384-12.288c11.776 14.336 25.088 33.28 32.256 46.592-4.608-20.48-13.312-50.688-27.648-96.768l-56.32 18.432c-1.536 14.336-4.096 28.16-7.68 38.912-5.12-2.56-14.848-6.144-22.528-8.704l24.064 73.216-21.504 7.168-36.864-113.152-40.96 13.312 37.376 114.176-20.48 6.656-45.568-138.24 82.432-27.136 18.944 57.344c6.656-22.016 7.68-51.712 5.632-78.848l28.16-3.072c0.512 10.24 1.024 20.48 0.512 30.72l72.704-24.064 5.632 11.264z m-128.512 112.128c11.264 33.792 17.92 77.312-11.776 115.712-4.608-3.584-13.824-8.192-19.968-10.752 29.184-32.768 19.456-71.168 10.752-98.304l-19.968-60.928 20.992-7.168 19.968 61.44z m23.552 42.496c14.848 8.192 35.328 20.48 45.568 28.672l-14.336 20.48c-9.728-8.192-30.208-21.504-45.056-30.72l13.824-18.432z"
            fill="#FFFAFB"
            p-id="4214"
          ></path>
        </svg>
      </div>
      <div class="active_list">
        <van-tabs
          v-model="active"
          animated
          title-inactive-color="black"
          title-active-color="red"
          v-if="seckillList"
        >
          <van-tab v-for="item in seckillData.seckillTime" :key="item.id">
            <template #title>
              <div class="active_title" @click="getSeckillList(item.id)">
                <span>{{ item.time }}</span>
                <span>{{ item.state }}</span>
              </div>
            </template>
            <template #default>
              <div v-if="seckillList.length != 0">内容</div>
              <div class="nodata" v-else><img src="http://47.115.51.185/h5/img/noGood.7aec7edd.png" alt=""></div>
            </template>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seckillData: null,
      active: 0,
      seckillList: null,
    };
  },
  created() {
    this.axios
      .get("/api/seckill/index")
      .then((response) => {
        this.seckillData = response.data.data;
      })
      .then(() => {
        this.getSeckillList(
          this.seckillData.seckillTime[this.seckillData.seckillTimeIndex].id
        );
      });
  },
  watch: {
    seckillData(n) {
      this.active = n.seckillTimeIndex;
    },
  },
  methods: {
    getSeckillList(id) {
      this.axios
        .get(`/api/seckill/list/${id}?page=1&limit=5`)
        .then((response) => {
          this.seckillList = response.data.data;
        });
    },
  },
};
</script>

<style lang="less">
.seckill {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loading_text {
      color: #272822;
    }
    @keyframes move {
      0% {
        transform: rotateZ(0deg);
      }

      15% {
        transform: rotateZ(180deg);
      }

      55% {
        transform: rotateZ(180deg);
      }

      70% {
        transform: rotateZ(360deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }

    .icon {
      animation: move 4s linear 2s infinite;
    }
  }
  .seckill_cover {
    width: 100%;
    background-color: #e4022e;
    border-radius: 0 0 20px 20px;
    .img {
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 8px;
      img{
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
  .seckill_active {
    width: 100%;
    margin-top: 10px;
    padding: 0 10px;
    display: flex;
    position: relative;
    .active_icon {
      width: 50px;
      height: 45px;
      position: absolute;
      background-color: #f5f5f5;
      top: 0;
      left: 10px;
      z-index: 9;
    }
    .active_list {
      width: 100%;
      .van-tabs {
        width: 100%;
        .van-tabs__wrap {
          padding-left: 45px;
          height: 50px;
          .van-tabs__nav {
            background-color: transparent;
            padding-bottom: 0;
            .van-tabs__line {
              bottom: 0;
              background-color: red;
              height: 0px;
            }
            .van-tab--active {
              font-weight: bold;
              span {
                &:nth-child(2) {
                  color: white;
                  background-color: red;
                  padding: 0 5px;
                  border-radius: 8px;
                  line-height: normal;
                }
              }
            }
            .van-tab {
              .van-tab__text {
                height: 100%;
              }
              .active_title {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding-top: 5px;
                span {
                  &:nth-child(1) {
                    font-weight: bold;
                    font-size: 20px;
                  }
                  &:nth-child(2) {
                    font-size: 12px;
                    line-height: normal;
                    margin-top: 2px;
                  }
                }
              }
            }
          }
        }
        .nodata{
          width: 100%;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 207px;
            height: 168px;
          }
        }
      }
    }
  }
}
</style>